<template>
    <div class="textEditElement" ref='textRef' contenteditable="true" :style="textStyle"></div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { UseMainStore } from '@/stores/index';
import { storeToRefs } from 'pinia'
let textRef = ref();
// 初始化位置
let { CreatingElement } = storeToRefs(UseMainStore());
let textStyle = ref(null)
function initPosition() {
    let { position } = CreatingElement.value;
    console.log('position---------', position)
    let x = position[0], y = position[1]
    textStyle.value = {
        left: (x + 10) + 'px',
        top: (y + 10) + 'px'
    }
    console.log('style-----', textStyle);
}
// 自动聚焦
onMounted(() => {
    textRef.value.focus();
    initPosition();
})
</script>
<style lang="scss" scoped>
.textEditElement {
    position: absolute;

    &:focus-visible {
        outline: none
    }

}
</style>
